<template>
  <div>
    <div>
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
      />
    </div>
    <ul>
      <li v-for="item in info" :key="item.id" @click="toContent(item.id)" >
        <div class="pic">
          <img src="../picture/202304171926.jpg" width="150px" alt="" />
        </div>
        <div class="text">
          <h3>{{ item.title }}</h3>
          <span class="desc">{{ item.desc }}</span>
          <p class="tags">{{ item.tags[0] }}</p>
          <p class="price">{{ item.price }}元/月</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'lookHome',
  data() {
    return {
      value: '',
      info: null,
    }
  },
  methods:{
    toContent(id){
      this.$router.push({
       name:'content',
       query:{
        id
       }
      })
     
    }
  },

  async created() {
    const { data } = await axios({
      url: 'http://liufusong.top:8080/houses',
      data: {
        cityId: 'AREA%7Cdbf46d32-7e76-1196',
        stat: '1',
        end: '10',
      },
    })
    console.log(data)
    this.info = data.body.list
  },
}
</script>

<style scoped>
ul li {
  display: flex;
}
img{
  margin-top: 10px; 
}
.desc {
  font-size: 12px;
  color: #afb2b3;
}
.tags {
  color: #39becd;
  background: #e1f5f8;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  width: 40px;
}
.price{
  color: #fa5741;
 
}
</style>
